<script setup lang="ts">
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/MyAxios.ts";
import {Toast} from "vant";
import qs from 'qs';
import UserCardList from "../components/UserCardList.vue";

const route = useRoute()
const {tags} = route.query;
const userList = ref([]);
onMounted(async () => {
  const userListData = await myAxios.get("/user/search/tags", {
    params: {
      userList: tags
    },
    //get请求后端的参数是数组 tags=男&tags=女 形式
    //导致后端接收不到，解决方式就是下面的这段代码
    paramsSerializer: params => {
      return qs.stringify(params, {indices: false});
    }
  })
      .then(function (response) {
        console.log('/user/search/tags succeed', response)
        return response?.data;
      })
      .catch(function (error) {
        console.error('/user/search/tags error', error)
        Toast.fail("请求失败");
      })
  console.log(userListData)
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
})
</script>

<template>
  <user-card-list :user-list="userList" :loading=false />
  <van-empty v-if="!userList||userList.length<1" description="搜素数据为空"></van-empty>
</template>

<style scoped>

</style>